<template>
  <!-- 歌单组件 -->
  <div class="list_item">
    <div class="top_music_img cursor_class" style="border-radius: 4px;overflow: hidden;">
      <!-- <img :src="coverImgUrl" alt="" @click="handleClickToListDetail"> -->
      <el-image :src="coverImgUrl" style="width: 100%; height: 100%;" fit="cover" lazy @click="handleClickToListDetail">
      </el-image>
      <div class="bottom">
        <span style="display:flex;align-items: center;">
          <el-icon>
            <Headset />
          </el-icon><span style="margin-left:5px">{{formatNumber(playCount)}}</span>
        </span>
        <span>
          <el-tooltip effect="dark" content="播放" placement="top-start">
            <el-icon :size="24" @click="handleClickPlay">
              <VideoPlay />
            </el-icon>
          </el-tooltip>
        </span>
      </div>
    </div>
    <div class="bottom_music_info">
      <div class="list_name text_ellipsis text_decoration cursor_class" @click="handleClickToListDetail">
        {{name}}
      </div>
      <span class="list_desc" v-if="authorInfo"><span style="color:#999">by </span><span
          class="text_decoration cursor_class"
          @click="()=>{router.push({name:'user-home',params:{id:authorId}})}">{{nickName}}</span></span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Headset, Plus, Timer, VideoPlay, Comment, FolderAdd, Pointer, PriceTag, House, Sunny, Guide, MostlyCloudy } from '@element-plus/icons-vue'
import { toRefs, defineProps, defineEmits, ref } from 'vue'
import { formatNumber } from "@/utils/index";
import { getPlayListDetail } from "@/api/playlist";
import router from '@/router/index'
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  //子组件接收父组件传递过来的值
  // 是否需要作者信息
  authorInfo: {
    type: Boolean,
    default: true
  },
  // 作者id
  authorId: {
    type: Number,
    default: 0
  },
  // 播放次数
  playCount: {
    type: Number,
    default: 0
  },
  // 歌单名字
  name: {
    type: String,
    default: ''
  },
  // 图片
  coverImgUrl: {
    type: String,
    default: ''
  },
  // 作者昵称
  nickName: {
    type: String,
    default: ''
  },
  id: {
    type: String || Number,
    require: true
  }
})
const emit = defineEmits(['handleClickToListDetail'])
const handleClickToListDetail = () => {
  emit('handleClickToListDetail', props.id)
}
const tracks = ref<any>([{}])
const { id,authorInfo, playCount, name } = toRefs(props)
const handleClickPlay = () => {
  getPlayListDetailData()
}
// 获取歌单详情数据
const getPlayListDetailData = async ():Promise<void> => {
  const res: any = await getPlayListDetail({
    id: props.id,
  })
  tracks.value = res.playlist.tracks
  let list = filterMusicData(tracks.value)
  store.dispatch('playAll', { list });
}
// 把需要vip的过滤出去
const filterMusicData = (tracks:any[]): any[] => {
  let list = tracks.filter((item: any)=>{
    return item.fee != 1
  })
  return list
}
</script>
<style lang="scss" scoped>
.list_item {
  .top_music_img {
    width: 100%;
    height: 140px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 27px;
      color: #ccc;
      background: rgba(0, 0, 0, .5);
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      box-sizing: border-box;
    }
  }

  .bottom_music_info {
    margin-top: 10px;

    .list_name {
      font-size: 14px;
      margin-bottom: 10px;
    }

    .list_desc {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>